<template>
	<view class="container">
		<view class="title">预约详情</view>
		<view>
			<image class="back" src="/static/images/白色左箭头.png" mode="" @click="goBack"></image>
		</view>
		<view class="appoint">
			<view style="font-size: 14px;">核销码：WE343235V</view>
			<image src="/static/home/baoyang/QRcode.png" style="width: 160rpx; height: 160rpx; margin: 10px auto;" />
		</view>
	</view>

	<view class="repair">
		<view class="repair-title">维修信息</view>
		<view class="repair-item">
			<view>维修单号：</view>
			<view>3535252</view>
		</view>
		<view class="repair-item">
			<view>维修状态：</view>
			<view>进行中</view>
		</view>
		<view class="repair-item">
			<view>车主姓名：</view>
			<view>张三丰</view>
		</view>
		<view class="repair-item">
			<view>联系方式：</view>
			<view>19938292821</view>
		</view>
		<view class="repair-item">
			<view>维修方式：</view>
			<view>上门取车</view>
		</view>
		<view class="repair-item">
			<view>取车位置：</view>
			<view>山阳区32号</view>
		</view>
		<view class="repair-item">
			<view>预约日期：</view>
			<view>2022/11/10 11:00</view>
		</view>
		<view class="repair-item">
			<view>提交日期：</view>
			<view>2022/11/08 12:34</view>
		</view>
	</view>

	<view class="vehicle">
		<view class="vehicle-title">车辆信息</view>
		<view class="vehicle-item">
			<view>车辆类型：</view>
			<view>大客车</view>
		</view>
		<view class="vehicle-item">
			<view>车牌号：</view>
			<view>豫J45323</view>
		</view>
		<view class="vehicle-item">
			<view>整车照片：</view>
		</view>
		<image src="/static/home/baoyang/screenshot1.png"></image>
		<view class="vehicle-item">
			<view>维修部位照片：</view>
		</view>
		<view class="repair-picture">
			<image src="/static/home/baoyang/screenshot1.png"></image>
			<image src="/static/home/baoyang/screenshot1.png"></image>
			<image src="/static/home/baoyang/screenshot1.png"></image>
		</view>
	</view>
	
	<view class="footer">
		<button  @click="goBack">取消预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/homebg.png);
		background-size: 100%;
	}

	.title {
		color: white;
		width: 100%;
		font-size: 18px;
		text-align: center;
		padding-top: 12px;
	}
	
	.back {
		position: absolute;
		left: 30rpx;
		top: 24rpx;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.appoint {
		width: 94%;
		margin: 20px auto;
		text-align: center;
		background-color: white;
		border-radius: 10px;
		padding: 30rpx 0;
	}

	.repair {
		width: 86%;
		margin: 20px auto;
		background-color: white;
		border-radius: 10px;
		padding: 10rpx 30rpx;
	}

	.repair-title {
		padding: 14rpx 0;
		font-size: 18px;
		font-weight: bold;
		border-bottom: #f7f7f7 4px solid;
		margin-bottom: 10rpx;
	}

	.repair-item {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 10rpx;
		font-size: 14px;
		color: #ababab;
	}

	.repair-item :nth-child(1) {
		color: black;
	}

	.vehicle {
		width: 86%;
		margin: 20px auto;
		background-color: white;
		border-radius: 10px;
		padding: 10rpx 30rpx;
	}

	.vehicle-title {
		padding: 14rpx 0;
		font-size: 18px;
		font-weight: bold;
		border-bottom: #f7f7f7 4px solid;
		margin-bottom: 10rpx;
	}

	.vehicle-item {
		display: flex;
		justify-content: space-between;
		padding: 16rpx 10rpx;
		font-size: 14px;
		color: #ababab;
	}

	.vehicle-item :nth-child(1) {
		color: black;
	}
	image{
		width: 150rpx;
		height: 120rpx;
		margin: 10rpx 10rpx;
	}
	
	.footer{
		width: 100%;
		background-color: white;
		padding: 20rpx 0;
	}
	.footer button{
		padding: 5rpx  20rpx;
		color: white;
		background-color: #3385fc;
		margin: 0 20rpx 0 auto;
		width: 180rpx;
		font-size: 12px;
		border-radius: 20px;
	}
</style>